<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example 01.02 -First Scene</title>
    <script src="../../public/javascripts/three.js"></script>
    <script src="../../public/javascripts/stats.js"></script>
    <script src="../../public/javascripts/dat.gui.js"></script>
    <script src="../../public/javascripts/jquery-1.9.0.js"></script>
    <style>
        body{
            margin:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output">
</div>
<div></div>
<script >
    function initStats() {
        var stats=new Stats();
        stats.setMode(0);
        stats.domElement.style.position='absolute';
        stats.domElement.style.left='0px';
        stats.domElement.style.top='0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }
    $(function () {
        var stats=initStats();
        var scene=new THREE.Scene();
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        var renderer=new THREE.WebGLRenderer();
        renderer.setClearColor('white',1.0);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMapEnabled=true;
//        var axes=new THREE.AxisHelper(20);
//        scene.add(axes);



        var planeGeometry=new THREE.PlaneGeometry(60,40,1,1);
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xcccccc});
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow=true;
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15;
        plane.position.y=0;
        plane.position.z=0;
        scene.add(plane);

//        var cubeGeometry=new THREE.CubeGeometry(4,4,4);
//        var cubeMaterial=new THREE.MeshLambertMaterial({color:0xff0000});
//        var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
//        cube.castShadow=true;
//        cube.position.x=2;
//        cube.position.y=3;
//        cube.position.z=0;
//        scene.add(cube);

        var sphereGeometry=new THREE.SphereGeometry(4,20,20);
        var sphereMaterial=new THREE.MeshLambertMaterial({color:0x7777ff});
        var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);
        sphere.castShadow=true;
        sphere.position.x=20;
        sphere.position.y=4;
        sphere.position.z=2;
        scene.add(sphere);

        camera.position.x=-30;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);

        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow=true;
        scene.add(spotLight);

        var controls=new function () {
            this.rotationSpeed=0.02;
            this.bouncingSpeed=0.03;
        };

        var gui=new dat.GUI();
        gui.add(controls,'rotationSpeed',-0.5,0.5);
        gui.add(controls,'bouncingSpeed',-100,100);

        var step=0;

        function renderScene() {
            stats.update();
//            cube.rotation.x+=controls.rotationSpeed;
//            cube.rotation.y+=controls.rotationSpeed;
//            cube.rotation.z+=controls.rotationSpeed;
            step+=controls.bouncingSpeed;
            sphere.position.z=(Math.sin(step*Math.PI/1000)*12+4);
            sphere.position.x=(Math.cos(step*Math.PI/1000)*12+5);
            requestAnimationFrame(renderScene);
            renderer.render(scene,camera);
        }

        $("#WebGL-output").append(renderer.domElement);
        renderScene();
    });

</script>
</body>
</html>